<template>
  <div class="fullMain" style="max-height: calc(100% - 50px);overflow: scroll;">
    <x-header :left-options="{backText: '',showBack: back}" :right-options="{showMore: true}"
    @on-click-more="toView"> 
      周报填写
    </x-header>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>
    <div style="height:20px"/>

    <div class="contentAll" >
      <div class="temp" v-for="(item,index) in reportList" :key="index">
        <div class="icon">
          <i class="fa fa-pencil-square-o" @click="modifyMemory(item)"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="fa fa-times" @click="deleteMemory(item)"></i>
        </div>
        
        <div style="word-wrap:break-word">
        标题：{{item.title}}<br>
        用时：{{item.hour}}h<br>
        工作内容：{{item.workContent}}<br>
        成效：{{item.effect}}<br>
        </div>
      </div>
      <div style="height:20px"/>
      <div class="edit">
        <x-switch title="填写上周周报:" :value-map="[false, true]" v-model="lastOrThisWeek"></x-switch>
      </div>
      <div class="edit" >
        <div class="icon">
            <i class="fa fa-times"  @click="clearValue"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="fa fa-plus"  @click="saveTemporary"></i>
        </div>
        <div>
          <span>标&nbsp;&nbsp;&nbsp;&nbsp;题：</span>
          <input v-model="title" style="border:none" >
        </div>
        <div>
          <span>用时(h)：</span>
          <input v-model="hour" style="border:none" placeholder="请输入数字，无需单位。">
        </div>
        <div>
          <span>工作内容：</span>
          <x-textarea v-model="workContent" placeholder="请输入工作内容"></x-textarea>
        </div>
        <div>
          <span>成效：</span>
          <x-textarea v-model="effect" :max="300" placeholder="请输入完成情况"></x-textarea>
        </div>
      </div>
      <div class="edit">
        <span>下周计划完成：</span>
        <x-textarea v-model="nextWeekPlan" :max="300" placeholder="请输入下周计划完成"></x-textarea>
      </div>
    </div><br>
    <x-button type="primary"  @click.native="submit" style="width:90%;border-radius: 20px;">
      提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</x-button>
  </div>
</template>

<script>
  import {XHeader,XTextarea,Group,XButton,XSwitch  } from 'vux'
  import {mapState} from 'Vuex'
  import year from 'api/year'

  export default {
    name: 'S_week_review',
    data () {
      return {
        isShowAlert:false,
        alertText:'',
        title:'',//已完成的标题
        hour:'',//用时
        workContent:'',//标题对应的内容
        effect:'',//已完成的内容
        reportList:[],//本周已完成的暂存列表
        nextWeekPlan:'',//下周计划
        lastOrThisWeek:false,
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      modifyContent(){
        return this.$route.params.modifyContent
      }
    },
    components: {
      XHeader,
      XTextarea,
      Group,
      XButton,
      XSwitch
    },
    mounted () {
      this.init()
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      toView(){
        this.$router.push({name: 'S_view_review'})
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      init(){
        if(this.modifyContent){
          this.reportList = this.modifyContent.reportList
          this.nextWeekPlan = this.modifyContent.nextWeekPlan
          if(this.modifyContent.year === new Date().getFullYear() && this.modifyContent.week === this.changeDateToWeek()){
            this.lastOrThisWeek = true
          }else{
            this.lastOrThisWeek = false
          }
        }
      },
      changeDateToWeek(){
        var d1 = new Date()
        var d2 = new Date()
        d2.setMonth(0)
        d2.setDate(1)
        var rq = d1-d2
        var s1 = Math.ceil(rq/(24*60*60*1000))//本年的第几天
        var s2 = Math.ceil(s1/7)//本年的第几周
        return s2
      },
      setToday () {
        let myDate
        //如果填写上周的，就传返回上周的今天的日期
        if(this.lastOrThisWeek){
          myDate = new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)
        }else{
          myDate = new Date()
        }
        let cmonth = myDate.getMonth() + 1
        let day = myDate.getDate()
        let hour = myDate.getHours()
        if (cmonth < 10) cmonth = '0' + cmonth
        if (day < 10) day = '0' + day
        return myDate.getFullYear() + '-' + cmonth + '-' + day
      },
      clearValue(){
        this.title=''
        this.hour=''
        this.workContent=''
        this.effect=''
      },
      deleteMemory(item){
        console.log("deleteMemory")
        const index = this.reportList.indexOf(item)
        this.reportList.splice(index, 1)
      },
      modifyMemory(item){
        this.title=item.title
        this.hour=item.hour
        this.workContent=item.workContent
        this.effect=item.effect
        this.deleteMemory()
      },
      judgeValue(){
        if(this.title === ''){
          this.showAlert('请填写【标题】')
          return false
        }else if(this.hour === ''){
          this.showAlert('请填写【用时】')
          return false
        }else if(!/^[1-9]*[0-9]$/.test(this.hour)){
          this.showAlert('【用时】请输入数字，无需单位')
          return false
        }
        else if(this.workContent === ''){
          this.showAlert('请填写【工作内容】')
          return false
        }
        else if(this.effect === ''){
          this.showAlert('请填写【成效】')
          return false
        }else{
          return true
        }
      },
      saveTemporary(){
        if(this.judgeValue()){
          let arr = {
            title: this.title,
            hour: this.hour,
            workContent: this.workContent,
            effect: this.effect,
          }
          this.reportList.push(arr)
          this.clearValue()
        }
      },
      submit(){
        if(this.nextWeekPlan === ''){
          this.showAlert("请填写【下周计划完成】")
          return
        }
        if(this.workContent !=='' || this.effect !== ''){
          this.saveTemporary()
        }
        //提交
        this.putData()
      },
      async putData(){
        let result
        if(this.modifyContent){
          result = await year.postUpdateWeekReport({
            date:this.setToday(),
            detail:{
              nextWeekPlan:this.nextWeekPlan,
              reportList:this.reportList,
            },
            // reportId:'',
            reportType:1,
            userId:this.userInfo.userId
          })
          if(result.code === 0){
            this.showAlert(result.message)
          }else{
            this.showAlert("修改成功")
            setTimeout(this.back,1000)
          }
        }else{
          result = await year.postAddWeekReport({
            date:this.setToday(),
            detail:{
              nextWeekPlan:this.nextWeekPlan,
              reportList:this.reportList,
            },
            // reportId:'',
            reportType:1,
            userId:this.userInfo.userId
          })
          if(result.code === 0){
            this.showAlert(result.message)
          }else{
            this.showAlert("提交成功")
            setTimeout(this.back,1000)
          }
        }
         
        
      },
      
        
    }
  }
</script>

<style scoped>
  .contentAll{
    width:90%;
    margin-left:5%;
    border-radius: 20px;
  }
  .temp{
    border:1px gray solid;
    line-height:25px;
    padding:10px;
    border-radius: 20px;
  }
  .icon{
    margin-left:70%;
    font-size:20px;
  }
  .edit{
    border:1px gray solid;
    line-height:25px;
    padding:10px;
    border-radius: 20px;
  }
</style>
